<template>
  <detail-layout :menus="menus" v-model:active="active">
    <div class="hotel-info">
      <div class="hotel-header">
        {{ data.name }}
      </div>
      <div class="tags">
        <div class="tag gold" v-if="data.cate_name">{{ data.cate_name }}</div>
        <div class="tag" v-for="tag in data.tags" :key="tag">{{ tag }}</div>
      </div>
      <div class="desc">{{ data.boe_desc }}</div>
    </div>
  </detail-layout>
</template>

<script>
import * as Api from "@/api/hotel";

import DetailLayout from "@/components/detail-layout/index.vue";

export default {
  components: {
    DetailLayout,
  },
  data() {
    return {
      active: "",
      images: [],
      videos: [],
      data: {},
    };
  },
  computed: {
    menus() {
      if (!this.active) return [];
      return [
        {
          key: "video",
          name: "探店视频",
          infoVisible: true,
          data: this.videos,
        },
        {
          key: "image",
          name: "酒店图片",
          infoVisible: true,
          data: this.images,
        },
        {
          key: "pano",
          name: "酒店全景",
          infoVisible: false,
          data: [{ pano: 1, hotel_id: this.$route.params.id }],
        },
      ].filter((item) => item.data.length);
    },
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { id } = this.$route.params;
      const res = await Api.detail(id);
      const { gallery_images = [], visit_videos = [] } = res;
      this.images = gallery_images.reduce(
        (arr, item) => [...arr, ...item.list],
        []
      );
      this.active = !visit_videos.length ? "image" : "video";
      this.videos = visit_videos;
      this.data = {
        name: res.name || "",
        cate_name: res.cate_name || "",
        tags: res.tags || [],
        boe_desc: res.boe_desc || "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
.hotel-detail {
  color: white;
}
.hotel-info {
  width: 300px;
  height: 100%;
  background: #26262a;
  padding: 0 20px;
  .hotel-header {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    line-height: 28px;
    padding-bottom: 10px;
  }
  .tags {
    display: flex;
    align-items: center;
  }
  .tag {
    height: 18px;
    font-size: 11px;
    border-radius: 2px;
    border: 1px solid #545454;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: #e7e7e7;
    padding: 0 3px;
  }
  .gold {
    background: linear-gradient(90deg, #e7cc8f 0%, #d5a450 100%);
    border: none;
    color: #613200;
  }
  .desc {
    font-size: 14px;
    color: #e7e7e7;
    line-height: 24px;
    padding-top: 60px;
    text-align: justify;
  }
}
</style>